import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import styles from './Analysis.less';
class PoliceStaticLine extends React.Component {
  render() {
    const {
      policeTitle,
      data,
    } = this.props;
    const cols = {
      year: {
        range: [0, 1]
      }
    };
    return (
      <div>
        <Chart height={400} data={data} scale={cols} forceFit style={{marginLeft: '-40px'}}>,
        {policeTitle && <h4 style={{ marginBottom: 20,marginLeft: '40px' }}>{policeTitle}</h4>}
          <Legend />
          <Axis name="year" />
          <Axis
            name="num"
            label={{
              formatter: val => `${val}`
            }}
          />
          <Tooltip
            crosshairs={{
              type: "y"
            }}
            useHtml
            htmlContent={(title, items) => {
                  return `<div class='custom-tooltip'>
                        <div class="police-title">${title}年警衔趋势分析</div>
                        <div>
                            ${items.map((val,index)=> {
                                return `<ul style="margin-left: -25px">
                                    <li>
                                      <span>${val.name}</span>
                                      <span style="margin-left: 8px">${val.value}人</span>
                                      <span class="police_Pub">比去年增长&nbsp;${val.point._origin.addnum}人</span>
                                      <span class="police_Pub">比去年增长&nbsp;${val.point._origin.percent}%</span>
                                    </li>
                                </ul>`
                            }).join('')}
                        </div>

                  </div>`
            }}
          />
          <Geom
            type="line"
            position="year*num"
            size={2}
            color={"type"}
            shape={"smooth"}
          />
          <Geom
            type="point"
            position="year*num"
            size={4}
            shape={"circle"}
            color={"type"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}

export default PoliceStaticLine
